<template>
  <div class="footer">
    <ul>
      <li>
        <router-link :to="{name: 'shouye/tuijian'}">
          <img src="../../assets/img/shouye/shouye/shouyeqian.png" alt="">
          <span>首页</span>
        </router-link>
      </li>
      <li>
        <router-link :to="{name: 'FenLei'}">
        <a href="">
          <img src="../../assets/img/shouye/shouye/feilei.png" alt="">
          <span>分类</span>
        </a>
        </router-link>
      </li>
      <li>
        <router-link :to="{name: 'duanhuohome'}">
        <a href="">
          <img  class="duanhuowang" src="../../assets/img/shouye/shouye/duanhuowang.png" alt="">
        </a>
        </router-link>
      </li>
      <li>
        <router-link :to="{name: 'cartn'}">
        <a href="">
          <img src="../../assets/img/shouye/shouye/gouwucheqian.png" alt="">
          <span>购物车</span>
        </a>
        </router-link>
      </li>
      <li>
        <router-link :to="{name: 'jialogin/login'}">
          <img src="../../assets/img/shouye/shouye/gerenqian.png" alt="">
          <span>个人中心</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
</script>
<style scoped>
  .footer{
    height: 2rem;
  }
  .footer ul{
    display: flex;
    width: 100%;
    height: 2rem;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    background: #fff;
    height: 2rem;
    padding: 0.5rem 0;
    /*align-items: center;*/
  }
  .footer ul li{
    flex: 1;
    text-align: center;
  }
  .footer ul li a{
    display: block;
  }
  .footer ul li img{
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0;
    /*background: red;*/
  }
  .footer ul .duanhuowang{
    padding-top: 0.2rem;
    width: 100%;
    height: 1.6rem;
  }
  .footer ul li span{
    font-size: 0.5rem;
    display: block;
    width: 100%;
    color: black;
    /*background: blue;*/
  }
</style>
